<template>
    <div id="app" class="page-year">
				<header>

				</header>
				<section>
						<div class="s-body">
							<div class="s-item s-item-money">

								<h4>输入投资金额</h4>
								<div class="s-form">
									<input v-model="money" @input="valids" type="number" pattern="[0-9]*" placeholder="金额为1000的整数倍" />
									<div v-show="!valid" class="s-error">{{validTxt}}</div>
								</div>
							</div>
							<div class="s-item s-item-day">
								<h4>优选红包·私人定制</h4>
								<div class="s-form">
									<div @click="switchDay(1)" v-bind:class="{'s-day-selected':choosedNum==1}" class="s-day">
										<div class="s-day-box">
												<div class="s-day-title">优选红包</div>
												<div class="s-day-content">{{paper28}}<span>元</span></div>
												<div class="s-day-num">≥28天 <br/>满{{money|valid}}元可用</div>
												<div class="s-day-btn">
													<span></span>选取红包
												</div>
										</div>
									</div>
									<div @click="switchDay(2)" v-bind:class="{'s-day-selected':choosedNum==2}" class="s-day">
										<div class="s-day-box">
												<div class="s-day-title">优选红包</div>
												<div class="s-day-content">{{paper90}}<span>元</span></div>
												<div class="s-day-num">≥90天 <br/>满{{money|valid}}元可用</div>
												<div class="s-day-btn">
													<span></span>选取红包
												</div>
										</div>
									</div>
								</div>
							</div>
							<div class="s-item s-item-btn">
								<div @click="submit" class="s-btn">{{btntxt}}</div>
							</div>
						</div>
				</section>
				<footer>
					<h4>活动规则</h4>
					<p>1. 活动期间(2月13日-2月28日)，在活动页面输入投资金额，选择想要的1个优选红包，点击领取，红包将实时发送至“我的-优惠券”，请及时查看使用；</p>
					<p>2. 每位用户每次仅限领取1个优选红包，优选红包须使用后才能领取下一个；</p>
					<p>3. 活动期间领取优选红包个数不设上限，领取的红包在活动期间有效，新手标不可使用优选红包；</p>
					<p>4. 活动期间，除新手标外，全民加息1.88%，全民加息可与优选红包活动同享；</p>
					<p>5. 对活动有任何疑问，请拨打客服热线400-156-7657，或联系在线客服。</p>
					<div class="f-footer">
						*在法律允许范围内，优选金融保留对本次活动的最终解释权。<br />
						活动仅成年人可参与，投资有风险，理财需谨慎。<br />
					</div>
				</footer>

				<!-- 奖励弹框 -->
				<div v-if="popup" class="p-box">
						<div class="p-box-mask"></div>
						<div class="p-box-body">
							<div @click="close" class="p-box-close"></div>
							<div class="p-box-paper">
								{{paper}}<i>元</i>
							</div>
							<div class="p-box-term">
									<p>投资金额 ≥ {{money}}元</p>
									<p>产品期限 ≥ {{choosedNum==2?90:28}}天</p>
							</div>
							<div @click="GoProductList" class="p-box-btn"></div>
						</div>
				</div>

    </div>
</template>

<script>
import { MessageBox } from "mint-ui";
export default {
  props: [],
  data() {
    return {
      countDownTimeOut: null,
      money: "?",
      day: 28,
      choosedNum: 1,
      paper90: "-",
      paper28: "-",
      valid: true,
      validTxt: "请输入投资金额",
      popup: false,
      startTime: "",
      endTime: "",
      nowTime: "",
      btntxt: "活动开始还有00：00：00",
      status: 1 // 0——未开始，1已开始，2已结束
    };
  },
  mounted() {
    var self = this;

    var req = this.Axios.get(this.Interface.GetActiveBaseInfo, {
      params: {
        topicId: 7
      }
    });

    req.then(res => {
      var data = res.data;
      if (data.success) {
        var { startTime, endTime, currentTime } = data.data;
        startTime = startTime * 1;
        endTime = endTime * 1;
        currentTime = currentTime * 1;

        if (currentTime < startTime) {
          //  未开始
          self.btntxt = "活动开始还有 00:00:00";
          self.countDowns((startTime - currentTime) / 1000);
          self.status = 0;
        } else if (currentTime >= startTime && currentTime <= endTime) {
          // 活动已结束
          self.btntxt = "领取专属红包";
          self.status = 1;
        } else if (currentTime >= endTime) {
          // 活动已结束
          self.btntxt = "活动已结束";
          self.status = 2;
        }
      } else {
        this.Toast(data.data.message || data.data.error_msg);
      }
    });
  },
  methods: {
    countDowns(time) {
      var self = this;
      var theTime = parseInt(time); // 秒
      var theTime1 = "00"; // 分
      var theTime2 = "00"; // 小时
      if (theTime > 60) {
        theTime1 = parseInt(theTime / 60);
        theTime = parseInt(theTime % 60);
        if (theTime1 > 60) {
          theTime2 = parseInt(theTime1 / 60);
          theTime1 = parseInt(theTime1 % 60);
        }
      }

      var result =
        parseInt(theTime) > 9 ? parseInt(theTime) : "0" + parseInt(theTime);
      if (theTime1 > 0) {
        result =
          (parseInt(theTime1) > 9
            ? parseInt(theTime1)
            : "0" + parseInt(theTime1)) +
          ":" +
          result;
      } else {
        result = "00:" + result;
      }
      if (theTime2 > 0) {
        result =
          (parseInt(theTime2) > 9
            ? parseInt(theTime2)
            : "0" + parseInt(theTime2)) +
          ":" +
          result;
      } else {
        result = "00:" + result;
      }
      if (time > 0) {
        self.status = 0;
        self.btntxt = "活动开始还有 " + result;
      } else {
        self.status = 1;
        self.btntxt = "领取专属红包";
        return false;
      }
      console.log(result);
      time--;
      if (self.countDownTimeOut) clearTimeout(self.countDownTimeOut);
      self.countDownTimeOut = setTimeout(function() {
        self.countDowns(time);
      }, 1000);
    },
    switchDay(d) {
      this.choosedNum = d;
    },
    close() {
      this.popup = false;
      $("body,html").removeClass("disScroll");
    },
    GoProductList() {
      APP.JumpNavite("jumpToProductList");
    },
    valids() {
      var self = this;
      const { money, day, valid, validTxt } = this;

      if (money * 1 <= 0) {
        this.valid = false;
        this.validTxt = "投资金额不能小于0";
        return false;
      } else {
        self.paper90 = "-";
        self.paper28 = "-";
        this.valid = true;
      }

      if (money == "") {
        this.valid = false;
        this.validTxt = "请输入投资金额";
        return false;
      } else {
        self.paper90 = "-";
        self.paper28 = "-";
        this.valid = true;
      }

      if ((money * 1) % 1000 != 0) {
        this.valid = false;
        this.validTxt = "投资金额必须是1000的整数倍";
        return false;
      } else {
        self.paper90 = "-";
        self.paper28 = "-";
        this.valid = true;
      }

      if (money * 1 > 100000) {
        this.valid = false;
        this.validTxt = "投资金额最大不能超过100,000元";
        return false;
      } else {
        self.paper90 = "-";
        self.paper28 = "-";
        this.valid = true;
      }

      // 如果输入的金额复合规则，则取请求内容
      if (money != "" && (money * 1) % 1000 == 0 && money * 1 <= 100000) {
        //
        var req = this.Axios.get(this.Interface.CountIncome, {
          params: {
            amount: money,
            productLimit: "123"
          }
        });

        req.then(res => {
          var data = res.data;
          if (data.success) {
            var result = data.data;
            self.paper90 = result.money90;
            self.paper28 = result.money28;
          } else {
            this.Toast(data.data.message || data.data.error_msg);
          }
        });
      }
    },

    submit() {
      var self = this;
      const { money, day, valid, validTxt } = this;
      // 验证
      if (money * 1 <= 0) {
        this.valid = false;
        this.validTxt = "投资金额不能小于0";
        return false;
      }
      // 验证
      if (money == "") {
        this.valid = false;
        this.validTxt = "请输入投资金额";
        return false;
      }

      if ((money * 1) % 1000 != 0) {
        this.valid = false;
        this.validTxt = "投资金额必须是1000的整数倍";
        return false;
      }

      if (money * 1 > 100000) {
        this.valid = false;
        this.validTxt = "投资金额最大不能超过100,000元";
        return false;
      }

      // 判断是不是APP,如果不是点击下载APP
      if (!APP.isClient) {
        window.location.href =
          "https://ss.youxuanqb.com/router/mz_sas_plan?a=1&p=5&c=21&d=android-ios&pl=hddownload";
      } else {
        // 判断是否登陆
        var UserInfo = APP.getInfo();
        UserInfo.then(res => {
          if (res.uId !== "") {
            self.CreateBonus(res.sessionid);
          } else {
            APP.Login();
            return false;
          }
        });
      }
      // self.CreateBonus(1);
    },
    CreateBonus() {
      var self = this;
      const { money, choosedNum } = this;

      if (self.status != 1) {
        return false;
      }

      // 参数
      const params = {
        amount: money,
        productLimit: ["", "28", "90"][choosedNum],
        sessionid: arguments[0]
      };
      // 定义请求
      var req = this.Axios.post(this.Interface.GetNewYearInfo, params);
      // var $url ="https://mock.mmcai.cn/mock/5a699f4d2b68750fbe1af69d/example/proxy#!method=post";
      // var req = this.Axios.post($url, params);

      // 处理请求
      req.then(res => {
        var result = res.data;
        // alert(JSON.stringify(result));
        if (result.success) {
          var data = result.data;
          var eCode = data.error_msg;
          if (eCode != undefined && eCode != "000000") {
            this.Toast(data.message || data.error_msg);
          } else {
            if (data.isReceive) {
              // this.Toast("你已领取过红包，请使用后再领取哦");

              var msg = MessageBox({
                title: "",
                message: "1",
                showConfirmButton: true,
                showCancelButton: true,
                cancelButtonText: "我知道了",
                confirmButtonText: ""
              });

              msg.then(res => {
                if (res != "cancel") {
                  self.GoProductList();
                }
              });
            } else {
              $("body,html").addClass("disScroll");
              this.paper = data.money;
              this.popup = true;
            }
          }
        } else {
          this.Toast(result.data.message || result.data.error_msg);
        }
      });
    }
  }
};
</script>
<style lang="less">
.disScroll {
  width: 100%;
  height: 100%;
  overflow: hidden;
}
input::-webkit-input-placeholder {
  color: #a9845f;
  font-size: 30px;
  opacity: 1;
}
.page-year {
  width: 100%;
  overflow: hidden;
  background: #aa2820 url("../../public/imgs/newyear/img-year-1.jpg") center 0
    no-repeat;
  background-size: 100% 1279px;
  // font-family: DinPro;
  header {
    height: 1003px;
    .h-time {
      display: block;
      // color:#fadc91;
      color: #fbdb94;
      text-align: center;
      box-sizing: border-box;
      padding: 284px 0 0 8px;
      font-size: 20px;
      letter-spacing: 0.25em;
    }
  }
  section {
    background: url("../../public/imgs/newyear/img-year-2.png") center 0
      no-repeat;
    background-size: 750px 953px;

    height: 953px;

    box-sizing: border-box;
    padding: 160px 0 0;
    .s-body {
      border-radius: 15px;
      box-sizing: border-box;
      .s-item {
        position: relative;
        h4 {
          font-size: 34px;
          color: #b63323;
          text-align: center;
          margin-bottom: 25px;
        }
        .s-form {
          position: relative;
          box-sizing: border-box;
          input {
            display: block;
            height: 83px;
            width: 100%;
            border: 1px solid #a9845f;
            border-radius: 15px;
            background: #faf3e3;
            box-sizing: border-box;
            text-align: center;
            font-size: 30px;
            color: #572828;
          }
          .s-day {
            border-radius: 15px;
            &:first-child {
              margin-right: 20px;
            }
            .s-day-box {
              position: relative;
              box-sizing: border-box;
              height: 340px;
              border-radius: 15px;
              background: #fff;
              border: 1px solid #eee;
              box-shadow: 0 7.5px 7.5px rgba(0, 0, 0, 0.15);

              .s-day-title {
                color: #333;
                font-size: 36px;
                padding: 30px 30px 0;
              }
              .s-day-content {
                color: #b63323;
                font-size: 44px;
                margin: 30px 0 25px 0;
                padding: 0 0 0 30px;
                span {
                  font-size: 28px;
                  margin-left: 5px;
                }
              }
              .s-day-num {
                color: #999;
                font-size: 24px;
                line-height: 44px;
                font-weight: 400;
                padding: 0 0 0 30px;
                margin-bottom: 15px;
              }
              .s-day-btn {
                width: 100%;
                background: #fff2e4;
                height: 60px;
                line-height: 62px;
                border-radius: 0 0 15px 15px;
                box-sizing: border-box;
                padding: 0 0 0 30px;
                font-size: 28px;
                color: #999;
                span {
                  float: left;
                  width: 36px;
                  height: 36px;
                  background: url("../../public/imgs/newyear/img-year-cir.png")
                    center no-repeat;
                  // border: 1px solid #eee;
                  border-radius: 50%;
                  background-size: 35px 35px;
                  margin: 12px 25px 0 0;
                }
              }
            }
            &.s-day-selected {
              .s-day-btn {
                color: #f9db91;
                background: #b63323;
                span {
                  background: url("../../public/imgs/newyear/img-year-cir-selected.png")
                    center no-repeat;
                  background-size: 35px 35px;
                  margin: 12px 25px 0 0;
                }
              }
            }
          }
          .s-error {
            position: absolute;
            bottom: -40px;
            left: 0px;
            color: #da2623;
            font-size: 24px;
          }
        }
        &.s-item-money {
          box-sizing: border-box;
          padding: 0 90px;
          margin-bottom: 60px;
        }
        &.s-item-day {
          background: url("../../public/imgs/newyear/img-year-line.png") 0 0
            no-repeat;
          background-size: 159px 47px;
          h4 {
            margin-bottom: 50px;
          }
          .s-form {
            display: -webkit-box;
            padding: 0 55px;
            box-sizing: border-box;
            .s-day {
              -webkit-box-flex: 1;
              background: #fff;
              width: 310px;
              height: 340px;
            }
          }
        }
        &.s-item-btn {
          background: url("../../public/imgs/newyear/img-year-btn.png") center 0
            no-repeat;
          background-size: 606px 90px;
          width: 100%;
          height: 90px;
          margin: 45px auto 0;
          padding: 0;
          .s-btn {
            display: block;
            width: 100%;
            height: 100%;
            text-align: center;
            line-height: 90px;
            font-size: 40px;
            color: #f9db91;
          }
        }
      }
    }
    .s-footer {
      background: #b63c30;
      border-radius: 15px;
      text-align: center;
      color: #ffcd93;
      font-size: 22px;
      line-height: 35px;
      box-sizing: border-box;
      padding: 20px 0;
      margin: 25px auto 0;
    }
  }
  footer {
    box-sizing: border-box;
    padding: 30px 30px 80px;
    color: #e9c1be;
    font-weight: normal;
    font-size: 24px;
    background: #951e16;
    margin: 40px 0 0 0;
    h4 {
      font-size: 28px;
      font-weight: normal;
      margin-bottom: 20px;
    }
    p {
      line-height: 40px;
    }
    .f-footer {
      font-size: 20px;
      color: #fff;
      margin: 40px 0 0 0;
      line-height: 35px;
    }
  }
  .p-box {
    position: fixed;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    .p-box-mask {
      position: absolute;
      left: 0;
      top: 0;
      right: 0;
      bottom: 0;
      background: rgba(0, 0, 0, 0.7);
      z-index: 1000;
    }
    .p-box-body {
      position: absolute;
      left: 0;
      top: 0;
      right: 0;
      bottom: 0;
      margin: auto;
      width: 100%;
      height: 782px;
      background: url("../../public/imgs/newyear/img-year-popup.png") center 0
        no-repeat;
      background-size: 750px 782px;
      z-index: 2000;
      .p-box-close {
        position: absolute;
        bottom: 0px;
        left: 50%;
        transform: translate(-50%, 0);
        width: 65px;
        height: 65px;
        background: #fff;
        opacity: 0;
        border-radius: 50%;
        z-index: 3000;
      }
      .p-box-paper {
        text-align: center;
        padding: 140px 0 0 0;
        color: #b63323;
        font-size: 120px;
        i {
          font-size: 36px;
          font-style: normal;
        }
      }
      .p-box-term {
        text-align: center;
        padding: 90px 0 0 0;
        color: #b63323;
        font-size: 24px;
        line-height: 40px;
      }
      .p-box-btn {
        width: 415px;
        height: 90px;
        background: #fff;
        opacity: 0;
        margin: 30px auto 0;
        border-radius: 10px;
      }
    }
  }
}

.mint-msgbox-wrapper {
  .mint-msgbox {
    width: 100%;
    height: 518px;
    background: transparent url("../../public/imgs/newyear/img-year-dialog.png")
      0 0 no-repeat;
    background-size: 750px 518px;
    box-sizing: border-box;

    .mint-msgbox-content {
      margin-bottom: 40px;
      border: none;
      .mint-msgbox-message {
        height: 150px;
        line-height: 160px;
        font-size: 28px;
        font-size: 0;
        line-height: 0;
      }
    }
    .mint-msgbox-btns {
      height: 80px;
      font-size: 28px;
      .mint-msgbox-cancel {
        position: absolute;
        left: 50%;
        transform: translate(-50%, 0);
        bottom: 0;
        width: 68px;
        height: 68px;
        border-radius: 50%;
        background: transparent;
        opacity: 0;
      }
      & > button {
        font-size: 0;
        line-height: 0;
        background: transparent;
      }
    }
  }
}
</style>
